<template>
  <view class="xy-user-card flex m-lr-30 p-t-30">
    <view class="l m-r-15">
      <image :src="$xyfun.image(user.info.avatar)" @tap="onLink" />
    </view>
    <view class="c">
      <view v-if="user.isLogin" @tap="$xyfun.to('/pages/user/info')">
        <view class="ts-32 flex lh-32 p-t-25 tb">
          {{user.info.nickname}}
        </view>
        <view class="ts-26 lh-28 m-t-15 tc-w">{{user.distribution.level.name}}</view>
      </view>
      <view v-else @tap="$xyfun.toLogin()">
        <view class="ts-32 lh-32 p-t-20 tb">点击登录</view>
        <view class="ts-26 lh-28 m-t-15 tc-999">点击登录访问更多内容</view>
      </view>
    </view>

  </view>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: "xyUserCard",
  props: {
    role: {
      type: String,
      default: 'user'
    }
  },
  data() {
    return {

      qrcodeModelShow:false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods:{
    async onLink(){
      if(this.role == 'user'){
        this.$xyfun.to('/pages/user/info');
      }
    }
  }
}
</script>
<style lang="scss">
.xy-user-card{
  width: 690rpx;
  .l{
    image{width: 110rpx;height: 110rpx;border-radius: 55rpx;}
  }
  .c{
    width: 300rpx;
  }
  .r{
    position: relative;
    .role{
      position: absolute;bottom: 0;right: 0;
      view{background: linear-gradient(#fc952b,#fbb227);height: 50rpx;line-height: 50rpx;padding: 0;border-radius: 25rpx;width: 150rpx;}

    }

    .coach{
      font-size: 54rpx;line-height: 54rpx;
    }

  }
}
</style>
